<template>
  <div>
     <div class="top"> 
      <div class="top_left"><img src="img/index/icon.png" ></div>
      <div class="top_center" ><van-search placeholder="搜索菜谱 食谱" v-model="value" /></div>
      <div class="top_right"><img src="img/index/ico.png" alt=""></div>
    </div> 
    <div style="height:200px; width:100%">
    <van-swipe :autoplay="3000" :show-indicators="false" indicator-color="white">
      <van-swipe-item>
        <img src="img/index/lunbo1.jpg" alt="">
        <div>
          <p>黑松露培根炒饭</p> 
          <span>对于一切的执着、刁钻甚至死心眼却换来了在日本的......</span>         
        </div>
        </van-swipe-item>
      <van-swipe-item>
        <img src="img/index/lunbo2.jpg" alt="">
        <div>
          <p>马蹄爽</p> 
          <span>藕粉黏稠，带着淡淡香气，马蹄脆甜，一口喝下去.....</span>         
        </div>
        </van-swipe-item>
      <van-swipe-item>
        <img src="img/index/lunbo3.jpg" alt="">
        <div>
          <p>蛋炒饭</p> 
          <span>蛋炒饭，是一种常见菜肴。几乎在每一家人的餐厨上都出现过这道菜...</span>         
        </div>
        </van-swipe-item>
      <van-swipe-item>
        <img src="img/index/lunbo4.jpg" alt="">
        <div>
          <p>水果双色冻</p> 
          <span>源自意大利的国宝级甜品芒果牛奶冻! 芒果控的朋友一定要学到！</span>         
        </div>
        </van-swipe-item>
    </van-swipe>
  </div>
  <div style="height:50px"></div>
  <div class="z_center">
    <div>
      <div class="z_img1"></div>
      <span>菜谱分类</span>
      </div>
    <div>
      <div class="z_img2" ></div>
      <span>热门排行</span>
      </div>
    <div>
      <div class="z_img3"></div>
      <span>食材定制</span>
      </div>
    <div>
      <div class="z_img4"></div>
      <span>在线视频</span>
      </div>
  </div>
  </div>

</template>
<script>
export default {
  
}
</script>
<style scoped>

.top{
  height:50px;
  width:100%;
  display: flex;
  background:white;
}
.top_left{
  height:50px;
  width:20%;
}
.top_left img{
  width:100%;
  height:100%;
}
.top_center{
  width:64%;
  height:50px;
}
.top_center van-search{
  width:100%;
  line-height: 25px;
  margin: 10px 0;
  border-radius: 3px;
  border: #ddd 1px solid;
  display: block; 
}
.van-swipe-item div{
position: fixed;
height:53.4px;
width:100%;
background-color:rgba(0, 0, 0, 0.3);
top:197px;
bottom:0;
}
.van-swipe-item div p{
  margin:1px;
  padding:0;
  color:white;
  font-size:19px;
  font-weight:bold;
  
}
.van-swipe-item div span{
  color:white;
  font-size:15px;
  
}
.van-swipe-item img{
  width:100%;
}
.top_right {
  width:16%;
  height:50px;
  text-align:center;
}
.top_right img{
  margin-top:15px;
}
.z_center{
  width:100%;
  height:110px;
  display: -webkit-box;
  padding: 5vw 0;
  background-color: #FFF;
  margin-bottom: 10px;

}
.z_center div{
  height:70px;
  width:25%;
 text-align: center;
 
}
.z_center div div{
  width: 45px;
  height: 45px;
  margin-left:25%;
  border-radius: 50%;
 background-position: center;    
}
.z_img1{
  background-repeat:no-repeat;
  background-color:#ff5b76;
  background-image: url(../../public/img/index/fen1.png);
  background-size:60% ; 
}
.z_img2{
  background-repeat:no-repeat;
  background-color:#b9a3f3;
  background-image: url(../../public/img/index/fen2.png);
  background-size:60% ; 
}
.z_img3{
  background-repeat:no-repeat;
  background-color:#3dc9a0;
  background-image: url(../../public/img/index/fen3.png);
  background-size:60% ; 
}
.z_img4{
  background-repeat:no-repeat;
  background-color:#fe7c23;
  background-image: url(../../public/img/index/fen4.png);
  background-size:70% ; 
}
.z_center div span{
  font-size:10px;

}
</style>